<!--
 * @Author: '周云芳‘ '164591357@qq.com'
 * @Date: 2022-08-14 16:13:39
 * @LastEditors: '周云芳‘ '164591357@qq.com'
 * @LastEditTime: 2022-08-14 19:28:58
 * @FilePath: \canvas-flowers\letterFireworks.html
 * @Description: 字母烟花-面向过程代码
-->
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>字母烟花</title>
    <style>
      body,
      html {
        padding: 0;
        margin: 0;
      }

      canvas {
        background-color: #ddd;
        width: 100%;
        height: 100vh;
      }
    </style>
  </head>

  <body>
    <canvas></canvas>
    <script>
      const oC = document.querySelector('canvas');
      oC.width = document.body.offsetWidth;
      oC.height = document.body.offsetHeight;
      const cxt = oC.getContext('2d');
      // 监听窗口变化
      window.addEventListener('resize', () => {
        oC.width = document.body.offsetWidth;
        oC.height = document.body.offsetHeight;
      });
      let particleArr = []; //烟花数量
      //     let str='';//ABCDEFGHIJKLMNOPQRSTUVWXYZ
      //   //   26个字母对应ASCII码值 A~Z为65~91
      //     for (let i = 65; i < 91; i++) {
      //       str+=String.fromCharCode(i)//其返回值为Unicode数值所表示的字符串
      //     }
      function generatePaticle() {
        // 生成粒子需要的参数
        let text = 'ABCDEFGHIJKLMNOPQRSTUVWXYZ';
        let item = {
          x: oC.width / 2,
          y: oC.height,
          xSpeed: Math.random() * 20 - 10, //偏移量为-10~10
          ySpeed: Math.random() * -20 - 5, //Y轴偏移量最小为5
          //HSL色相表示,定义色轮上的度数（从 0 到 360）- 0（或 360）为红色，120 为绿色，240 为蓝色。定义饱和度 - 0％ 是灰度，而 100％ 是全彩色（完全饱和）。定义亮度 - 0％ 是黑色、50％ 为正常、100％ 是白色。定义不透明度，介于 0.0（完全透明）和 1.0（完全不透明）之间的数字。
          color: [0, 100, 50, 1],
          font: text[Math.floor(Math.random() * text.length)],
        };
        particleArr.push(item);
        if (particleArr.length > 120) {
          particleArr.shift();
        }
        // 绘制粒子
        for (let i = 0, len = particleArr.length; i < len; i++) {
          const item = particleArr[i];
          let color = `hsla(${item.color[0]},${item.color[1]}%,${item.color[2]}%,${item.color[3]})`;
          cxt.fillStyle = color;
          cxt.font = '12px 微软雅黑';
          cxt.fillText(item.font, item.x, item.y);
          item.x += item.xSpeed;
          item.y += item.ySpeed;
          item.ySpeed *= 0.98; //让其它速度慢一点
          item.color[0]++; //色相值增加
          item.color[3] *= 0.99; //透明度越来越小
          //颜色大于100
          if (item.color[0] > 110) {
            // 移动的过程色相值越来越白
            item.color[2] = 100; //设置亮度变白
            item.color[3] = 1; //透明度,让其看的更清
            item.xSpeed = 0; //静止
            item.ySpeed = 0;
          }
        }
        // 设置阴影让看起来不会越叠越多
        cxt.fillStyle = `rgba(0,0,0,0.1)`;
        cxt.fillRect(0, 0, oC.width, oC.height);
      }
      function play() {
        generatePaticle();
        requestAnimationFrame(play);
      }
      play();
    </script>
  </body>
</html>
